2023/05/23 更新: 為了避免本文章散落在不同網站，之後統一由部落格更新，再麻煩從部落格查看～

本文章同時發佈於：

• Github(包含程式碼)
• Medium
• iT 邦幫忙

文章為自己的經驗與夥伴整理的內容，設計沒有標準答案，如有可以改進的地方，請告訴我，我會盡我所能的修改，謝謝大家～

大家好，在昨天的 gRPC 實作後，在微服務上我們可以用更完整的方案溝通，那是否有一個方案，可以將 gRPC 運用在前端與後端溝通呢？

有的，那就是gRPC-Web！

為什麼需要 gRPC-Web

圖片來源: Envoy and gRPC-Web: a fresh new alternative to REST

gRPC 在前端運作最大的問題，就是前端對於 gRPC 所使用的 protocol 不是那麼完好的支援，現在主流瀏覽器使用HTTP1.1，而 gRPC 使用的是更加高效的HTTP2。

那該怎麼解決，Google 提供的解決方案是利用一個 proxy 架設在後端，將前端所有的 HTTP1.1 流量轉換成 HTTP2，如下圖:

圖片來源: Envoy and gRPC-Web: a fresh new alternative to REST

envoy 是現在常見的一個 proxy，他對於微服務溝通的各種問題有很好的緩解作用，在未來 istio 介紹中，會更常看到他。

有這個 HTTP1.1 透過 envoy 轉換的過程，勢必會缺小原生 HTTP2 的一些好處，如下:

• 不支援 Client-Streaming: 雖然支援 Server-Streaming 的功能，但在 Client-Streaming 上因為 HTTP1.1 的安全性問題，始終沒有啟用，一旦解決後 gRPC-Web 可以透過 Server 與 Client 的 Streaming 來做雙工串流。
• 不使用二進制傳輸: 因為前端使用二進制並非會有較好的效能，所以還是使用類似 JSON 的方式傳送。

所以，gPRC-Web 在選用上，如果你有以下需求，那他將會是你的好選擇:

• 前後端要有一致的溝通介面
• 前端有訂閱需求(可用 Server-Steaming 實作)

接下來會對 gRPC-Web 實際實作，謝謝你的閱讀～

參考

• grpc / grpc-web：適用於 Web 客戶端的 gRPC
• master 上的 grpc-web / roadmap.md·grpc / grpc-web
• Envoy and gRPC-Web: a fresh new alternative to REST | by Luc Perkins | Envoy Proxy
• grpc-web/streaming-roadmap.md at master · grpc/grpc-web